<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.min.css">
				
			<link rel="stylesheet" type="text/css" href="css/style2.css"/>
			<style>
				html,
				body {
					background-color: #efeff4;
				}
				.mui-bar~.mui-content .mui-fullscreen {
					top: 44px;
					height: auto;
				}
				.mui-fullscreen{
					position: relative;
					height: 525px;
				}
				.mui-pull-top-tips {
					position: absolute;
					top: -20px;
					left: 50%;
					margin-left: -25px;
					width: 40px;
					height: 40px;
					border-radius: 100%;
					z-index: 1;
				}
				.mui-bar~.mui-pull-top-tips {
					top: 24px;
				}
				.mui-pull-top-wrapper {
					width: 42px;
					height: 42px;
					display: block;
					text-align: center;
					background-color: #efeff4;
					border: 1px solid #ddd;
					border-radius: 25px;
					background-clip: padding-box;
					box-shadow: 0 4px 10px #bbb;
					overflow: hidden;
				}
				.mui-pull-top-tips.mui-transitioning {
					-webkit-transition-duration: 200ms;
					transition-duration: 200ms;
				}
				.mui-pull-top-tips .mui-pull-loading {
					/*-webkit-backface-visibility: hidden;
					-webkit-transition-duration: 400ms;
					transition-duration: 400ms;*/
					
					margin: 0;
				}
				.mui-pull-top-wrapper .mui-icon,
				.mui-pull-top-wrapper .mui-spinner {
					margin-top: 7px;
				}
				.mui-pull-top-wrapper .mui-icon.mui-reverse {
					/*-webkit-transform: rotate(180deg) translateZ(0);*/
				}
				.mui-pull-bottom-tips {
					text-align: center;
					background-color: #efeff4;
					font-size: 15px;
					line-height: 40px;
					color: #777;
				}
				.mui-pull-top-canvas {
					overflow: hidden;
					background-color: #fafafa;
					border-radius: 40px;
					box-shadow: 0 4px 10px #bbb;
					width: 40px;
					height: 40px;
					margin: 0 auto;
				}
				.mui-pull-top-canvas canvas {
					width: 40px;
				}
				.mui-slider-indicator.mui-segmented-control {
					background-color: #efeff4;
				}
				.mui-segmented-control.mui-scroll-wrapper .mui-scroll{
					/* width: 100%; */
					background: #FFF;
				}
			</style>
		

		<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css"/>
	</head>

	<body>
		<!-- muicontent start -->
		<div class="mui-content mui-scroll-wrapper" id='mcontent'>
			<div class="mui-scroll">
				<!-- mui card start -->
				<div class="mui-card">
					<div class="mui-card-header">我的肤质近况： <span id="skinScore" style="font-size: 18px;">80</span>综合得分<br></div>
					<div class="mui-card-content" style="padding-left: 15px;">
						肤质：轻干|轻耐|非色素|紧致，干油性适中，皮肤看上去不够光滑，敏感性正常<br>
						问题：最近痘痘问题轻度，有轻度黑头问题，毛孔比较粗大<br>
						根据2019年5月的1条检测记录生成
					</div>
				</div>
				<!-- muicard end -->
				
				<!-- 护肤指南 start -->
				<div class="mui-row" id="skinTips">
					<div class="mui-card" style="padding:3px 15px;">
						<div>
							<span>护肤指南</span>
						</div>
						<div>
							<p>这一皮肤易于打理，很少出现过敏症状，所以可以选择几乎所有类型的产品，也可以耐受强功效的产品...</p>
						</div>
						<div style="text-align:center">
							<button type="button" class="mui-btn mui-btn-success mui-btn-outlined" >更多护肤建议</button>
						</div>
						<br>
					</div>
					
				</div>
				<!-- 护肤指南 end -->
				<!-- 皮肤项目管理 -->
				<div>
					 <ul class="mui-table-view"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#">皮肤管理项目</a>
							<div class="mui-collapse-content">
								<a class="mui-push-right">
									<p>小气泡皮肤清洁管理</p>
								</a>
								<a class="mui-push-right">
									<p>皮肤补水管理</p>
								</a>
								<a class="mui-push-right">
									<p>痘痘肌管理</p>
								</a>
								<a class="mui-push-right">
									<p>皮肤美白管理</p>
								</a>
								<a class="mui-push-right">
									<p>眼部综合管理</p>
								</a>
								<a class="mui-push-right">
									<p>抗皱管理</p>
								</a>
							</div>
						</li>
					</ul>
				</div>
				<!-- 皮肤项目管理 end -->
				<!-- 同肤质最爱单品 start -->
				<div class="mui-row">
					<!-- 这里加载product-list.html -->
				</div>
				<!-- start -->
				<div class="mui-content">
					<div id="slider" class="mui-slider mui-fullscreen">
						<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
							<div class="mui-scroll">
								<a class="mui-control-item mui-active" href="#item1mobile">
									洁面
								</a>
								<a class="mui-control-item" href="#item2mobile">
									滋养抗衰
								</a>
								<a class="mui-control-item" href="#item3mobile">
									补水修复
								</a>
								<a class="mui-control-item" href="#item4mobile">
									精华
								</a>
								<a class="mui-control-item" href="#item5mobile">
									眼部护理
								</a>
								<a class="mui-control-item" href="#item6mobile">
									面膜
								</a>
								<a class="mui-control-item" href="#item6mobile">
									卸妆
								</a>
								<a class="mui-control-item" href="#item6mobile">
									防晒
								</a>
								<a class="mui-control-item" href="#item6mobile">
									去角质
								</a>
								<a class="mui-control-item" href="#item6mobile">
									隔离
								</a>
								<a class="mui-control-item" href="#item6mobile">
									护唇
								</a>
								<a class="mui-control-item" href="#item6mobile">
									美体
								</a>
								<a class="mui-control-item" href="#item6mobile">
									洗护
								</a>
							</div>
						</div>
						<div class="mui-slider-group">
							<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
								<div id="scroll1" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<div class="blog_sy_fenlei pa ">
												<!-- <p>最新内容</p> -->
												<ul class="mui-table-view blog_sy_ul">
												    <li class="mui-table-view-cell mui-media">
												        <a href="javascript:;">
												            <img class="mui-media-object mui-pull-left" src="images/p01.jpg">
												            <div class="mui-media-body">
												                洁颜乳
												                <p class='mui-ellipsis'>去除油性皮肤，保持干爽</p>
												            </div>
												        </a>
												    </li>
												    <li class="mui-table-view-cell mui-media">
												        <a href="javascript:;">
												            <img class="mui-media-object mui-pull-left" src="images/p02.jpg">
												            <div class="mui-media-body">
												                男生深层洁面乳
												                <p class='mui-ellipsis'>男士定制，呵护每一寸肌肤</p>
												            </div>
												        </a>
												    </li>
												    <li class="mui-table-view-cell mui-media">
												        <a href="javascript:;">
												            <img class="mui-media-object mui-pull-left" src="images/p04.jpg">
												            <div class="mui-media-body">
												                植物酵素焕活紧致洁面乳
												                <p class='mui-ellipsis'>洁净微粒·走出暗淡</p>
												            </div>
												        </a>
												    </li>
													<li class="mui-table-view-cell mui-media">
													    <a href="javascript:;">
													        <img class="mui-media-object mui-pull-left" src="images/p05.jpg">
													        <div class="mui-media-body">
													           玫瑰心宠润养洁面泥
													            <p class='mui-ellipsis'>双效水润·密集保湿</p>
													        </div>
													    </a>
													</li>
													<li class="mui-table-view-cell mui-media">
													    <a href="javascript:;">
													        <img class="mui-media-object mui-pull-left" src="images/p06.jpg">
													        <div class="mui-media-body">
													            抗氧化洁颜乳
													            <p class='mui-ellipsis'>温和洁净，赋予肌肤细致呵护</p>
													        </div>
													    </a>
													</li>
													<li class="mui-table-view-cell mui-media">
													    <a href="javascript:;">
													        <img class="mui-media-object mui-pull-left" src="images/p07.jpg">
													        <div class="mui-media-body">
													            卸妆啫喱
													            <p class='mui-ellipsis'>氨基酸配方温和不刺激；细致柔滑泡沫，洁净毛孔，用后滑润不紧绷。</p>
													        </div>
													    </a>
													</li>
													
												</ul>
											</div>
											
										</ul>
									</div>
								</div>
							</div>
							<div id="item2mobile" class="mui-slider-item mui-control-content">
								<div class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell">
												第2个选项卡子项-1
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-2
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-3
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-4
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-5
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-6
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-7
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-8
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-9
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-10
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-11
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-12
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-13
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-14
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-15
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-16
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-17
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-18
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-19
											</li>
											<li class="mui-table-view-cell">
												第2个选项卡子项-20
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div id="item3mobile" class="mui-slider-item mui-control-content">
								<div class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell">
												第3个选项卡子项-1
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-2
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-3
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-4
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-5
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-6
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-7
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-8
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-9
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-10
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-11
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-12
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-13
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-14
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-15
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-16
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-17
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-18
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-19
											</li>
											<li class="mui-table-view-cell">
												第3个选项卡子项-20
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div id="item4mobile" class="mui-slider-item mui-control-content">
								<div class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell">
												第4个选项卡子项-1
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-2
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-3
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-4
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-5
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-6
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-7
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-8
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-9
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-10
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-11
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-12
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-13
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-14
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-15
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-16
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-17
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-18
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-19
											</li>
											<li class="mui-table-view-cell">
												第4个选项卡子项-20
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div id="item5mobile" class="mui-slider-item mui-control-content">
								<div class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell">
												第5个选项卡子项-1
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-2
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-3
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-4
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-5
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-6
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-7
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-8
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-9
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-10
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-11
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-12
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-13
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-14
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-15
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-16
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-17
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-18
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-19
											</li>
											<li class="mui-table-view-cell">
												第5个选项卡子项-20
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div id="item6mobile" class="mui-slider-item mui-control-content">
								<div class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell">
												第6个选项卡子项-1
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-2
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-3
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-4
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-5
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-6
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-7
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-8
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-9
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-10
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-11
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-12
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-13
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-14
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-15
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-16
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-17
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-18
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-19
											</li>
											<li class="mui-table-view-cell">
												第6个选项卡子项-20
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- end -->
				<!-- 同肤质最爱单品 start -->
				<!-- share -->
				<div>
					<!-- todo 添加肤质测试情况分享的页面 -->
				</div>
				<!-- end share -->
				
			</div>
			
		</div>
		<!-- muicontent end -->
		
	
		
		<script src="js/mui.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="font_icon/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();
			var subPageStyle={
				top: "400px",
				// bottom: "50px"
			};
			mui('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: false, //是否显示滚动条
			});
			mui.plusReady(function(){
				// 设置系统状态栏背景
				// console.log("方法被调用");
				plus.navigator.setStatusBarBackground( "#ff8dae" );
				// 设置系统状态栏样式为浅色文字
				plus.navigator.setStatusBarStyle( "UIStatusBarStyleBlackOpaque" );
				// var thisWebview = plus.webview.currentWebview();
				// var subPage = plus.webview.create('product-list.html', 
				// 									'product-list.html',
				// 									subPageStyle);
				// 隐藏webview窗口
				// subPage.show();
				// // 追加每一个子页面到当前主页面
				// thisWebview.append(subPage);
			});
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: false, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							// down: {
							// 	callback: function() {
							// 		var self = this;
							// 		setTimeout(function() {
							// 			var ul = self.element.querySelector('.mui-table-view');
							// 			ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
							// 			self.endPullDownToRefresh();
							// 		}, 1000);
							// 	}
							// },
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
							fragment.appendChild(li);
						}
						return fragment;
					};
					// console.log(plus.webview.getDisplayWebview());
				});
			})(mui);
		</script>
	</body>

</html>
